<template>
	<view class="tixian_list">
		<view class="huibg display-flex just-between">
			<view class="" style="padding-top: 40rpx;">
				<view class="ketxt">
					可提现佣金
					<!-- <text>（总佣金：￥{{userInfo.commission}}）</text> -->
				</view>
				<view class="ketitle ">
					￥{{userInfo.with_month}}
				</view>
			</view>
			<view class="img">
				<image :src="'/images/m_r.png' | formatImgUrl" mode="aspectFit"></image>
				<view @click="$go('/pages/user/bill?type=1')" class="txts">
					提现记录 >
				</view>
			</view>
		</view>

		<view class="con">
			<view class="tp">
				<view>输入提现金额</view>
				<view @click="goToxie(11)">提现规则 > </view>
			</view>
			<view class="nav">

				<input v-model="form.price" type="number" placeholder="请输入金额(最低不少于100元)" @blur="checkContent">

			</view>
			<view class="tx display-flex">
				<image :src="'/images/tx.png' | formatImgUrl"></image><text>由于扣税银行转账手续费等因素，请以实际到账金额为准</text>
			</view>
			<view class="desc">
				<view>提现到账说明</view>
				<view>
					佣金提现至银行卡、微信或支付宝，到账金额将是税后金额：
					根据《中华人民共和国税收征收管理法》及相关税收法律法规规定，并结合国家税务总局相关文件要求，文娱领域从业人员成立的个人工作室和企业，要依法依规建账建制，采用查账征收方式申报纳税。请提供合规票据作为结算凭据，依法履行纳税义务。本公司按票面金额全额付款。如您未提供发票结算，将扣除6%作为税费及服务费由合作单位代征代缴税费。
				</view>
			</view>

		</view>
		<view class="wrap">
			<view class="tp">
				<view>提现渠道</view>
				<view @click="$go('/pages/user/withdrawal_list')">管理帐号 > </view>
			</view>

			<radio-group @change="radioChange">

				<view class="cnt" v-for="(item,index) in navlist">
					<image class="img" :src="item.img" mode=""></image>
					<view class="shuput" v-if="item.type==2">
						{{!(data_tx&&data_tx.wx_nickname)?"待绑定":data_tx&&data_tx.wx_nickname}}
					</view>
					<view class="shuput" v-if="item.type==3">
						{{!(data_tx&&data_tx.ali_username)?"待填写":data_tx&&data_tx.ali_username}}
					</view>
					<view class="shuput" v-if="item.type==1">

						{{!(data_tx&&data_tx.card)?"待填写":data_tx&&data_tx.card}}
					</view>
					

					<radio
						v-if="(item.type==1&&data_tx&&data_tx.card)||(item.type==2&&data_tx&&data_tx.wx_nickname)||(item.type==3&&data_tx&&data_tx.ali_username)"
						style="transform: scale(0.8);float: right;margin-top: 22rpx;" color="#45C4B0" :value="String(item.type)"
						:checked="index === index1" />
				</view>

				<view class="cnt" @tap="kefu">
					<image class="img" :src="'/images/kf.png' | formatImgUrl" mode=""></image>
					<input type="text" disabled="" class="shuput" value="在线客服">
				</view>
			</radio-group>
		</view>

		<view class="wrap">
			
			<view class="tixian" @click="sendCode">
				立即提现
			</view>
			
			<view class="xiebox" @click="isRead =( isRead == 2?0:2)" :class="isRead == 1 ? 'shake-horizontal' : ''">
				<label>
					<!-- <checkbox style="transform: scale(0.7);" :checked="isRead" /> -->
					<u-checkbox shape="circle" size="14" :checked="isRead" activeColor="#45C4B0" inactiveColor="#999" @change="changeBox"></u-checkbox>
				</label>
				<view class="xietxt">
					我已阅读并同意:<text @click.stop="goToOtherxie(15)">《提现服务协议》</text>
					
					<text @click.stop="look_xiye()">《灵活就业合作伙伴协议》</text>
				</view>
			</view>
		</view>

		<view class="wrap">
			<view class="bom">

			</view>
		</view>
		
		
		<u-popup mode="center" :show="show2">
			<view class="mask-tip">
				<view class="tit">
					提现验证提醒
				</view>
				<view class="txt">
					请输入验证码核实身份
				</view>
				<view class="code display-flex">
					<u-code-input
						v-model="code"
						:maxlength="6"
						space="5"
						size="33"
						:focus="true"
					></u-code-input>
				</view>
				<view class="btn" @tap="submit">
					开始验证
				</view>
				<view class="txt" style="margin-top: 12px;" @tap="show2=false,$go('/showcase/login/phone')">
					无法验证？切换绑定手机
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show2 = false,code=''" class="closepic" mode="aspectFit"></image>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				navlist: [{
						type: 2,
						name: '微信',
						img: '/static/image/up1.png',
						val: ""
					}, {
						type: 3,
						name: '支付宝',
						img: '/static/image/up2.png',
						val: ""
					},
					{
						type: 1,
						name: '银行卡',
						img: '/static/images/ka.png',
						val: ""
					},
				],
				index1: 0,
				index2: 2,
				form: {
					type: 2,
					pay_img: '',
					name: '',
					bank_number: '',
					bank_name: '',
					price: '',

				},
				data_tx: null,
				isRead: false,
				is_dong: '',
				code: '',
				show2: false
			}
		},
		onLoad() {

		},
		onShow() {
			this.getinfo();
			this.getUserInfo();
			
			this.getAccountState()
		},
		methods: {
			look_xiye(){
				this.$api.default.request('user/get_yzf_xieyie',{}).then((res) => {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + res.data
					})
				})
				
			},
			// 短信验证
			sendCode(){
				if(this.is_dong == 1){
					this.$common.errorToShow('您的佣金提现权限已被暂时关停')
					return
				}
				
				this.form.type = this.index2;
				if (this.form.price > this.userInfo.with_month) {
					this.$common.errorToShow('提现金额不能大于当月可提现金额')
					this.form.price = this.userInfo.with_month
					return
				}
				
				if (!this.isRead) {
					this.$common.errorToShow('请先勾选提现服务协议')
					return
				}
				
				this.$api.default.request('user/sendSmsUser', {}).then((res) => {
					if (res.code == 1) {
						this.$common.successToShow(res.msg, () => {
							this.show2=true
						})
					}
				})
			},
			kefu(){
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfcf6e13cdfaad774ff'},
				  corpId: 'wwff81ee3e67679806',
				  success(res) {},
				  fail(err){
					  console.log('err',err)
				  }
				})
				// #endif
				
				// #ifndef MP-WEIXIN
				this.$go('/showcase/user/kefuType')
				// #endif
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 6,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			changeBox(e){
				this.isRead = e ? 2 : 0
			},
			checkContent(){
				this.form.price = parseInt(this.form.price)
				if(this.form.price < 1){
					this.$common.errorToShow('最小为1~')
					this.form.price = 1
				}
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo', {}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						this.$db.set('userInfo',res.user)
					}
				})
			},
			goToxie(id) {
				// pages/user/abount_dea
				uni.navigateTo({
					url: '/pages/user/abount_dea?id=' + id
				})

				console.log(this.$config.default.Url + '/agreement/1000006', 77)
				// uni.navigateTo({
				// 	url:'/pages/webview/webview?url=' +this.$config.default.Url + '/agreement/1000006'
				// })
			},
			radioChange(e) {
				this.index2 = e.detail.value;
			},
			getinfo() {
				var _this = this;
				this.$api.default.request('user/userInfoTx', {}, 'POST', false).then((res) => {
					if (res.code) {
						_this.data_tx = res.data
					}
				})
			},
			submit() {
				if(this.is_dong == 1){
					this.$common.errorToShow('您的佣金提现权限已被暂时关停')
					return
				}
				
				this.form.type = this.index2;
				if (this.form.price > this.userInfo.with_month) {
					this.$common.errorToShow('提现金额不能大于当月可提现金额')
				}

				
				if (!this.isRead) {
					this.$common.errorToShow('请先勾选提现服务协议')
					return
				}
				if (this.form.price < 100) {
					this.$common.errorToShow('提现金额最少100元')
				}

				this.$api.default.request('user/withdraw2', this.form).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getUserInfo()
							uni.navigateBack()
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			navTap(item) {
				this.form.type = item.type
			},
			onChooseImg() {
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.pay_img = data
					}
				}, 1)
			},
		}
	}
</script>

<style lang="scss">
	.closepic{
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin: 40rpx auto 0;
	}
	.mask-tip{
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;
		font-family: '思源黑体';
		
		.tit{
			font-size: 16px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.phone{
			margin-top: 8px;
			font-size: 24px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.txt{
			margin-top: 4px;
			font-size: 12px;
			color: #45C4B0;
		}
		
		.desc{
			margin-top: 12px;
			text-align: left;
			font-family: Source Han Sans;
			font-size: 12px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.btn{
			margin-top: 30px;
			width: 100%;
			height: 43px;
			line-height: 43px;
			text-align: center;
			border-radius: 8px;
			background: #45C4B0;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.code {
			margin-top: 12px;
			padding: 0 20rpx;
			justify-content: center;
		}
	}
	
	.tixian_list {
		width: 100%;
		overflow-x: hidden;
		height: 100vh;
		background: #f2f5f2;
		
		.huibg {
			background: #fff;
			padding: 40rpx 30rpx 10rpx;
			padding-top: 0;
			padding-right: 0;
			box-sizing: border-box;
			border-top: 1rpx solid rgba(242, 245, 242, 1);
			align-items: flex-start;

			.img {
				// position: absolute;
				// right: 0rpx;
				// top: 0rpx;
				height: 160rpx;
				width: 220rpx;
				overflow: hidden;
				
				image {
					height: 160rpx;
					width: 220rpx;
				}

				.txts {
					font-size: 26rpx;
					position: relative;
					left: 70rpx;
					top: -120rpx;
					color: #45C4B0;
				}
			}

			.ketxt {
				font-size: 32rpx;
				font-weight: 700;

				letter-spacing: 0em;
				color: #3D3D3D;
				line-height: 40rpx;

				text {
					color: #999999;
				}
			}

			.ketitle {
				font-size: 66rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #45C4B0;
				line-height: 86rpx;
				padding-bottom: 20rpx;
			}


		}

		.con {
			padding-bottom: 30rpx;
			width: 100%;
			background: #fff;
			margin-top: 20rpx;
			box-sizing: border-box;

			.tp {
				color: #3d3d3d;
				padding-top: 30rpx;
				width: 90%;
				margin-left: 5%;
				height: 30px;
				font-weight: 700;
				font-size: 35rpx;

				view {
					float: left;

					&:last-child {
						font-size: 28rpx;
						font-weight: 500;
						float: right;
						color: #45C4B0;
					}
				}
			}

			.nav {
				color: #999;
				margin-top: 20rpx;
				width: 90%;
				margin-left: 5%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 4px;
				opacity: 1;
				background: rgba(216, 216, 216, 0.3);

				input {
					height: 80rpx;
					line-height: 80rpx;
					border: 0px;
					margin-left: 26rpx;
				}

			}

			.desc {
				padding-top: 20rpx;
				margin-top: 20rpx;
				width: 90%;
				margin-left: 5%;
				border-radius: 4px;
				opacity: 1;
				background: rgba(216, 216, 216, 0.3);

				view {
					color: #999999;
					font-size: 24rpx;
					width: 90%;
					margin-left: 5%;

					&:first-child {
						color: #3D3D3D;
						font-weight: 700;
					}

					&:last-child {
						width: 90%;
						margin-left: 5%;
						margin-top: 10rpx;
						padding-bottom: 20rpx;
					}
				}

			}

			.tx {
				padding: 9px 23px;
				font-size: 10px;
				color: #ED3232;

				image {
					width: 16px;
					height: 16px;
					margin-right: 2px;
				}
			}
		}

		.wrap {
			padding-bottom: 20rpx;
			margin-top: 20rpx;
			background: #fff;
			padding: 0 30rpx;
			padding-top: 1rpx;
			min-height: 20rpx;
			box-sizing: border-box;

			.tp {
				color: #3d3d3d;
				padding-top: 30rpx;
				width: 100%;
				height: 30px;
				font-weight: 700;
				font-size: 35rpx;

				view {
					float: left;

					&:last-child {
						font-size: 28rpx;
						font-weight: 500;
						float: right;
						color: #45C4B0;
					}
				}
			}

			.shutxt {
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
				padding: 40rpx 0 25rpx;
			}

			.cnt {
				border-bottom: 1px solid #eeeeee;

				&:last-child {
					border-bottom: 0px;
				}

				image {
					width: 35rpx;
					height: 30rpx;
					;
					float: left;
					margin-top: 25rpx;
				}

				.shuput {
					margin-top: 20rpx;
					padding-bottom: 15rpx;
					font-size: 28rpx;
					color: #999;
					width: 60%;
					float: left;
					margin-left: 20rpx;
				}

				clear: both;
				height: 80rpx;
			}

			.tixian {
				width: 630rpx;
				height: 86rpx;
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				text-align: center;
				margin: 0 auto;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #FFFFFF;
				line-height: 86rpx;
				margin-top: 30rpx;
			}
		}

	}

	.xiebox {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;

		.xietxt {
			font-size: 23rpx;
			color: #999999;
			text {
				font-size: 23rpx;
				font-weight: bold;
				color: #45C4B0;
				// padding: 0 rpx;
			}
		}
	}
</style>